<template>
  <div>
    <div style="width: 100%; height: 1200px; top: 5%">
      <div style="height: 800px; width: 100%">
        <div class="shape-container">
          <div class="shape-name">侦察探测:</div>
          <div class="parallelogram green" style="">
            <div style="display: flex;position: absolute;" >
              <div
                class="it circle"
                v-for="(i,idx) in level1Nodes[0]"
                :id="'war_node' + i.node_id"
                :key="i.node_id"
                :style="computedStyles(0,idx)"
                @mouseover="showId(i.equipment)"
                @mouseleave="hideId"
              >
                <span class="hover-info">{{ hoverName }}</span>
              </div>
            </div>
            <div style="display: flex;position: absolute;">
              <div
                class="it circle"
                v-for="(i,idx) in level1Nodes[1]"
                :id="'war_node' + i.node_id"
                :key="i.node_id"
                :style="computedStyles(1,idx)"
                @mouseover="showId(i.equipment)"
                @mouseleave="hideId"
              >
                <span class="hover-info">{{ hoverName }}</span>
              </div>
            </div>
            <div style="display: flex;position: absolute; ">
              <div
                class="it circle"
                v-for="(i,idx) in level1Nodes[2]"
                :id="'war_node' + i.node_id"
                :key="i.node_id"
                :style="computedStyles(2,idx)"
                @mouseover="showId(i.equipment)"
                @mouseleave="hideId"
              >
                <span class="hover-info">{{ hoverName }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="shape-container">
          <div class="shape-name">指挥控制:</div>
          <div class="parallelogram blue">
            <div style="display: flex;position: absolute;">
              <div
                class="it triangle"
                v-for="(i,idx) in level2Nodes[0]"
                :id="'war_node' + i.node_id"
                :key="i.node_id"
                :style="computedStyles(0,idx)"
                @mouseover="showId(i.equipment)"
                @mouseleave="hideId"
              >
                <span class="hover-info">{{ hoverName }}</span>
              </div>
            </div>
            <div style="display: flex;position: absolute;">
              <div
                class="it triangle"
                v-for="(i,idx) in level2Nodes[1]"
                :id="'war_node' + i.node_id"
                :key="i.node_id"
                :style="computedStyles(1,idx)"
                @mouseover="showId(i.equipment)"
                @mouseleave="hideId"
              >
                <span class="hover-info">{{ hoverName }}</span>
              </div>
            </div>
            <div style="display: flex;position: absolute;">
              <div
                class="it triangle"
                v-for="(i,idx) in level2Nodes[2]"
                :id="'war_node' + i.node_id"
                :key="i.node_id"
                :style="computedStyles(2,idx)"
                @mouseover="showId(i.equipment)"
                @mouseleave="hideId"
              >
                <span class="hover-info">{{ hoverName }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="shape-container">
          <div class="shape-name">火力打击:</div>
          <div class="parallelogram red">
            <div style="display: flex;position: absolute;">
              <div
                class="it hexagon"
                v-for="(i,idx) in level3Nodes[0]"
                :id="'war_node' + i.node_id"
                :key="i.node_id"
                :style="computedStyles(0,idx)"
                @mouseover="showId(i.equipment)"
                @mouseleave="hideId"
              >
                <span class="hover-info">{{ hoverName }}</span>
              </div>
            </div>
            <div style="display: flex;position: absolute;">
              <div
                class="it hexagon"
                v-for="(i,idx) in level3Nodes[1]"
                :id="'war_node' + i.node_id"
                :key="i.node_id"
                :style="computedStyles(1,idx)"
                @mouseover="showId(i.equipment)"
                @mouseleave="hideId"
                
              ></div>
              <span class="hover-info">{{ hoverName }}</span>
            </div>
            <div style="display: flex;position: absolute;">
              <div
                class="it hexagon"
                v-for="(i,idx) in level3Nodes[2]"
                :id="'war_node' + i.node_id"
                :key="i.node_id"
                :style="computedStyles(2,idx)"
                @mouseover="showId(i.equipment)"
                @mouseleave="hideId"
              ></div>
              <span class="hover-info">{{ hoverName }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import * as d3 from 'd3'
import LeaderLine from "@/static/leader-line.min.js";

export default {
  props: {
    fromParData: {
      ssl_ids: [],
      nodes: [],
      lines: [],
    },
  },
  computed: {
    
    hasInPath() {
      // 检查当前路径是否包含0
      return this.$route.path.includes("stage3");
    },
  },
  methods: {
    computedStyles(level,idx) {
      var newid = idx
      if(idx > 2){
        newid =  5 - idx - 0.5
      }
      return {
        position: "absolute",
        left: idx * 70 + 'px',
        top: level * 40  + newid * 7 + 'px'
        // 可以添加其他样式属性
      };
    },
    highlightSelectedKillChain(selectedKillChain) {
      // 在这里实现高亮选中的杀伤链的逻辑
      // 可以通过操作 DOM 或者改变组件的数据来实现高亮效果
    },
    showId(name) {
      this.hoverName = `${name}`;
    },
    hideId() {
      this.hoverId = "";
    },
    drawLine() {
      if (this.currentSsl == 0) {
        this.destroyLine();
        this.drawLineAll();
        return;
      }
      //console.log(this.currentSsl)
      this.destroyLine();
      let newLines = [];
      this.lines.forEach((line) => {
        if (line.ssl_id == this.currentSsl) {
          //画图
          let start = document.getElementById("war_node" + line.start);
          let end = document.getElementById("war_node" + line.end);
          if(start != end){
            let arr = [];
          arr[0] = start;
          arr[1] = end;
          arr[2] = line.ssl_id;
          arr[3] = Math.floor(line.probability * 100);
          newLines.push(arr);
          }
          
          // let newLine = new LeaderLine(start, end, {
          //   color: this.colorIdx[line.ssl_id - 1],
          //   path: 'fluid',
          //   size: 2,
          //   // startLabel: "",
          //   middleLabel: LeaderLine.pathLabel('p:' + Math.floor(line.probability*100) + '%')
          // })
          // this.leaderLines.push(newLine)
        } else {
          //画图
          let start = document.getElementById("war_node" + line.start);
          let end = document.getElementById("war_node" + line.end);
          if(start != end){
            let newLine = new LeaderLine(start, end, {
            color: "grey",
            path: "fluid",
            size: 2,
            // startLabel: "",
            // middleLabel: LeaderLine.pathLabel("p:12%"),
          });
          this.leaderLines.push(newLine);
          }
          
        }
      })
      // console.log(newLines)
      for(let i = 0;i <newLines.length;i++){
        let start = newLines[i][0];
        let end = newLines[i][1];
        
        let newLine = new LeaderLine(start, end, {
          path: "fluid",
          size: 3,
          // startLabel: "",
          // middleLabel: LeaderLine.pathLabel("p:" + newLines[i][3] + "%"),
        });
        this.leaderLines.push(newLine);
      }
    },
    drawLineAll() {
      // this.destroyLine();
      // console.log("drawLineAll")
      // console.log(this.lines)
      // console.log(this.ssl_ids)

      // let sslid = this.ssl_ids.id
      this.generateColors();

      for (let i = 0; i < this.ssl_ids.length; i++) {
        let ssl_id = this.ssl_ids[i].id;
        // console.log(ssl_id)

        this.lines.forEach((line) => {
          if (line.ssl_id == ssl_id) {
            //画图

            let start = document.getElementById("war_node" + line.start);
            let end = document.getElementById("war_node" + line.end);
            if(start != end ){
              // console.log(start)
            // console.log(line.start)
            let newLine = new LeaderLine(start, end, {
              color: this.colorIdx[i],
              path: "fluid",
              size: 3,
              // startLabel: "",
              middleLabel: LeaderLine.pathLabel(
                // "p:" + Math.floor(line.probability * 100) + "%"
              ),
            });
            this.leaderLines.push(newLine);
            }

            
          }
        });
      }
    },
    destroyLine() {
      this.leaderLines.forEach((line) => {
        line.remove();
      });
      this.leaderLines = [];
      // this.level1Nodes = [[],[]]
      // this.level2Nodes = [[],[]]
      // this.level3Nodes = [[],[]]
    },
    sendSslId(parentData, id) {
      // 子组件中的方法，用于接收父组件的数据并触发自定义事件发送给父组件
      // this.$emit('sendToChild', message);
      this.lines = parentData.lines.length == 0 ? [] : parentData.lines;
      this.nodes = parentData.nodes.length == 0 ? [] : parentData.nodes;
      this.ssl_ids = parentData.ssl_ids.length == 0 ? [] : parentData.ssl_ids;
      this.colorIdx = [];

      let new_level1Nodes = [[], [], []];
      let new_level2Nodes = [[], [], []];
      let new_level3Nodes = [[], [], []];
      let storedIds = new Set();
      const levelNums = 6;
      for (let i = 0; i < this.nodes.length; i++) {
        if (storedIds.has(this.nodes[i].node_id)) {
          continue;
        } else {
          storedIds.add(this.nodes[i].node_id);
        }
        if (this.nodes[i].level == "侦察探测") {
          if (new_level1Nodes[0].length < levelNums) {
            new_level1Nodes[0].push(this.nodes[i]);
          } else if (new_level1Nodes[1].length < levelNums) {
            new_level1Nodes[1].push(this.nodes[i]);
          } else if (new_level1Nodes[2].length < levelNums) {
            new_level1Nodes[2].push(this.nodes[i]);
          }
        }
        if (this.nodes[i].level == "指挥控制") {
          if (new_level2Nodes[0].length < levelNums) {
            new_level2Nodes[0].push(this.nodes[i]);
          } else if (new_level2Nodes[1].length < levelNums) {
            new_level2Nodes[1].push(this.nodes[i]);
          } else if (new_level2Nodes[2].length < levelNums) {
            new_level2Nodes[2].push(this.nodes[i]);
          }
        }
        if (this.nodes[i].level == "火力打击") {
          if (new_level3Nodes[0].length < levelNums) {
            new_level3Nodes[0].push(this.nodes[i]);
          } else if (new_level3Nodes[1].length < levelNums) {
            new_level3Nodes[1].push(this.nodes[i]);
          } else if (new_level3Nodes[2].length < levelNums) {
            new_level3Nodes[2].push(this.nodes[i]);
          }
        }
      }
      this.level1Nodes = new_level1Nodes;
      this.level2Nodes = new_level2Nodes;
      this.level3Nodes = new_level3Nodes;
      this.currentSsl = parseInt(id);
      this.$nextTick(() => {
        this.destroyLine();
        this.drawLine()
      })
    },
    generateRandomColor() {
      // 生成一个随机的RGB颜色
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      return `rgb(${r},${g},${b})`;
    },
    generateColors() {
      if(this.colorIdx.length != 0){
        return;
      }
      const colors = [];
      const totalColors = this.lines.length; // 要生成的颜色总数
      while (colors.length < totalColors) {
        const color = this.generateRandomColor();
        if (!colors.includes(color)) {
          colors.push(color);
        }
      }
      this.colorIdx = colors;
    }
  },
  mounted() {
    // 获取传递的参数
    const selectedKillChain = this.$route.params.selectedKillChain;

    // 根据参数进行逻辑处理，比如高亮选中的杀伤链
    this.highlightSelectedKillChain(selectedKillChain);
  },
  updated() {
    // this.destroyLine();
    // this.drawLine();
  },
  beforeDestroy() {
    this.destroyLine();
  },
  created() {},
  beforeUpdate() {},
  watch: {
    // currentSsl: {
    //   handler() {
    //     // this.loadData();
    //     this.drawLine()
    //   }
    // }
  },

  // mounted() {
  //   this.drawWeaponLevels();
  // },
  data() {
    return {
      shouldShowDiv: true,
      receivedMessage: "", // 在子组件中使用一个变量来接收父组件传递的数据
      currentPage: "stage5",
      colorIdx: [],
      hoverName: "",
      currentSsl: -1,
      ssl_ids: [],
      nodes: [],
      lines: [],
      leaderLines: [],
      level1Nodes: [[], [], []],
      level2Nodes: [[], [], []],
      level3Nodes: [[], [], []],
    };
  },
};
</script>

<style scoped>
.shape-container {
  height: 30%;
  width: 100%;
  display: flex;
  align-items: center;
}

.shape-name {
  width: 15%;
  margin-left: 5px;
  margin-right: 5px;
  font-weight: bold;
}

.parallelogram {
  width: 60%;
  height: 70%;
  /* left: 5%; */
  background: transparent;
  position: relative;
  transform: skew(-50deg);
  margin: 10px;
  border: 1px solid rgba(71, 67, 67, 0.692); /* 添加黑色边框 */
  /* display: flex; */
}

.red {
  background-color: rgb(250, 190, 190);
  margin-left: -10px;
}

.blue {
  background-color: rgb(196, 238, 255);
  margin-left: 30px;
}

.green {
  background-color: rgb(186, 253, 186);
  margin-left: 5px;
}

.parallelogram:before {
  position: absolute;
  top: 0;
  left: 40px;
  width: 40px;
  height: 100%;
  background: inherit;
  transform: skew(30deg);
}

.parallelogram:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 鼠标悬停时的阴影效果 */
}

.circle:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 鼠标悬停时的阴影效果 */
}

.circle {
  width: 23px;
  height: 23px;
  border-radius: 50%; /* 将方块转换为圆形 */
  background-image: url("../../../assets/实心飞机.svg");
  background-size: cover; /* 图片填充圆形 */
  margin: 15px; /* 圆形之间的间距 */
  transform: skew(50deg);
  border: 1px solid rgba(71, 67, 67, 0.692); /* 添加黑色边框 */
  /* position: absolute; */
}

.hexagon:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 鼠标悬停时的阴影效果 */
}

.hexagon {
  width: 23px;
  height: 23px;
  border-radius: 50%; /* 将方块转换为圆形 */
  background-image: url("../../../assets/导弹.svg");
  background-size: cover; /* 图片填充圆形 */
  margin: 15px; /* 圆形之间的间距 */
  transform: skew(50deg);
  border: 1px solid rgba(71, 67, 67, 0.692); /* 添加黑色边框 */
}

.triangle:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 鼠标悬停时的阴影效果 */
}

.triangle {
  width: 23px;
  height: 23px;
  /* left: 10px; */
  /* border-left: 25px solid transparent; /* 左侧边为透明 */
  /* border-right: 25px solid transparent; 右侧边为透明 */
  /* border-bottom: 50px solid transparent; 底边为透明 */
  background-image: url("../../../assets/医护人员.svg");
  background-size: cover; /* 图片填充圆形 */
  margin: 15px;
  transform: skew(50deg);
  border: 1px solid rgba(71, 67, 67, 0.692); /*添加黑色边框*/
}

/* 添加一些样式 */
.hover-info {
  display: none;
  position: absolute;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #ccc;
}

.it:hover .hover-info {
  display: block;
}
</style>
